<template>
  <div class="background">
    <el-header class="order-container" v-if="table === 0">
      <div class="header">
        <el-button class="title1" type="text"><el-icon><Ticket /></el-icon>1.选择航班</el-button>
        <el-button class="title" type="text"><el-icon><Ticket /></el-icon>2.填写订单</el-button>
        <el-button class="title" type="text"><el-icon><Ticket /></el-icon>3.增值服务</el-button>
        <el-button class="title" type="text"><el-icon><Ticket /></el-icon>4.出票完成</el-button>
      </div>
      <div type="card" class="order-card">
        <el-row>
          <el-col :span="12">
            <div class="content" v-if="step === '0'">
              <el-header class="header1">
                <el-button class="button1" @click="step = '0'">单程</el-button>
                <el-button class="button2" @click="step = '1'">往返</el-button>
              </el-header>
              <el-divider class="divider"></el-divider>
              <el-main class="main">
                <el-form>
                  <el-form-item>
                    <el-select
                        v-model="departureCity"
                        filterable
                        placeholder="出发城市"
                        class="input1"
                    >
                      <el-option
                          v-for="item in cities"
                          :key="item.cityCode"
                          :label="item.cityName"
                          :value="item.cityCode">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-button class="icon" circle icon = "Switch" @click="changeCity"></el-button>
                  <el-form-item >
                    <el-select
                        v-model="arrivalCity"
                        filterable
                        placeholder="到达城市"
                        class="input2"
                    >
                      <el-option
                          v-for="item in cities"
                          :key="item.cityCode"
                          :label="item.cityName"
                          :value="item.cityCode">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item class="form-item1">
                    <el-date-picker v-model="date" type="date" placeholder="选择日期" class="input3" @change="changeDate"></el-date-picker>
                  </el-form-item>
                </el-form>
              </el-main>
              <el-footer>
                <el-form-item>
                  <el-button type="text" @click="search" class="find-button1">查询</el-button>
                </el-form-item>
              </el-footer>
            </div>
            <div class="content" v-if="step === '1'">
              <el-header class="header1">
                <el-button class="button4" @click="step = '0'">单程</el-button>
                <el-button class="button5" @click="step = '1'">往返</el-button>
              </el-header>
              <el-divider class="divider"></el-divider>
              <el-main class="main">
                <el-form>
                  <el-form-item>
                    <el-select
                        v-model="departureCity"
                        filterable
                        placeholder="出发城市"
                        class="input1"
                    >
                      <el-option
                          v-for="item in cities"
                          :key="item.cityCode"
                          :label="item.cityName"
                          :value="item.cityCode">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-button class="icon" circle icon = "Switch" @click="changeCity"></el-button>
                  <el-form-item>
                    <el-select
                        v-model="arrivalCity"
                        filterable
                        placeholder="到达城市"
                        class="input2"
                    >
                      <el-option
                          v-for="item in cities"
                          :key="item.cityCode"
                          :label="item.cityName"
                          :value="item.cityCode">
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item class="form-item1">
                    <el-date-picker type="date" v-model="date" placeholder="去程日期" class="input3" @change="changeDate"></el-date-picker>
                  </el-form-item>
                  <el-form-item class="form-item2">
                    <el-date-picker type="date" v-model="date1" placeholder="返程日期" class="input4"></el-date-picker>
                  </el-form-item>
                </el-form>
              </el-main>
              <el-footer>
                <el-form-item>
                  <el-button type="text" @click="order = 0" class="find-button2">查询</el-button>
                </el-form-item>
              </el-footer>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="card" v-if="order === 0">
        <el-header class="header2">
          <el-text class="text">单程：</el-text>
          <el-text class="text">{{departureCity}}</el-text>
          <el-text class="text">-</el-text>
          <el-text class="text">{{arrivalCity}}</el-text>
          <el-text class="text">{{normalDate}}</el-text>
        </el-header>
        <div v-for="flight in flights" :key="flight.flightId" >
          <el-main class="main-card" type="card">
            <el-text class="flightNumber">{{flight.flightNumber}}</el-text>
            <el-text class="departureTime">{{flight.webDepartureTime}}</el-text>
            <el-text class="arrivalTime">{{ flight.webArrivalTime }}</el-text>
            <el-text class="airline">{{ flight.airline }}</el-text>
            <div style="margin-top: 5px;" v-for="(cabin, index) in flight.cabinPrices" :key="index">
              <el-button  style="margin-left: 500px; background-color: transparent;" @click="getTicketsBySelect(flight.flightId)">{{ cabin.price}}RMB</el-button>
              <el-text style="margin-left: 10px;" >{{ cabin.cabinName }}</el-text>
            </div>
          </el-main>
        </div>
      </div>
    </el-header>
    <el-header class="order-container" v-if="table === 1">
      <div class="header">
        <el-button class="title2" type="text" @click="table = 0"><el-icon><Ticket /></el-icon>1.选择航班</el-button>
        <el-button class="title1" type="text"><el-icon><Ticket /></el-icon>2.填写订单</el-button>
        <el-button class="title" type="text"><el-icon><Ticket /></el-icon>3.增值服务</el-button>
        <el-button class="title" type="text"><el-icon><Ticket /></el-icon>4.出票完成</el-button>
      </div>
      <div type="card" class="order-card1">
        <div style="margin-top:20px" v-for="(ticket, index) in form.tickets" :key="index">
        <el-header class="header5">
          <span class="title3">乘机人信息-{{index+1}}</span>
        </el-header>
        <el-main class="main1">
          <el-form :model="form" label-width="150px">
          <el-form-item label="证件类型">
            <el-select v-model="form.tickets[index].idCardType" placeholder="请选择证件类型" >
              <el-option
                  v-for="item in idCardTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="身份证"  >
            <el-input   v-model="form.tickets[index].idCard" :maxlength="18" :show-word-limit="true" style="width: 500px;"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input   v-model="form.tickets[index].name" :maxlength="10" :show-word-limit="true" style="width: 500px;"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.tickets[index].phone" :maxlength="11" :show-word-limit="true" style="width: 500px;"></el-input>
          </el-form-item>
          </el-form>
        </el-main>
      </div>
      </div>
      <div>
        <el-button class="back-button" @click="table = 0">重新选择航班</el-button>
        <el-button class="back-button" @click="addTicket(form.tickets)">添加乘机人</el-button>
        <el-button class="back-button" @click="table = 2">下一步</el-button>
      </div>
    </el-header>>
    <el-header class="order-container" v-if="table === 2">
      <div class="header">
        <el-button class="title2" type="text" @click="table = 0"><el-icon><Ticket /></el-icon>1.选择航班</el-button>
        <el-button class="title2" type="text" @click="table = 1"><el-icon><Ticket /></el-icon>2.填写订单</el-button>
        <el-button class="title1" type="text"><el-icon><Ticket /></el-icon>3.增值服务</el-button>
        <el-button class="title" type="text"><el-icon><Ticket /></el-icon>4.出票完成</el-button>
      </div>
      <div type="card" class="order-card2">
        <el-header class="header5">
          <span class="title3">增值服务</span>
        </el-header>
        <el-main>
          <el-row :gutter="40">
            <el-col :span="6">
              <el-card class="card-item0">
                <el-header class="card-header">
                  <span class="title4">提前选座</span>
                </el-header>
                <el-main class="card-main">
                  <el-img src="@assets/good1.png" class="goods"></el-img>
                  <el-text class="card-text1">座享启乘</el-text>
                  <el-text class="card-text2">心仪座位提前选</el-text>
                </el-main>
                <el-footer class="card-footer">
                  <el-button class="card-button">购买</el-button>
                </el-footer>
              </el-card>
            </el-col>
            <el-col span="6">
              <el-card class="card-item0">
                <el-header class="card-header">
                  <span class="title4">超额行李</span>
                </el-header>
                <el-main class="card-main">
                  <el-img src="@assets/good2.png" class="goods"></el-img>
                  <el-text class="card-text1">行李提前购</el-text>
                  <el-text class="card-text2">优惠即时享</el-text>
                </el-main>
                <el-footer class="card-footer">
                  <el-button class="card-button">购买</el-button>
                </el-footer>
              </el-card>
            </el-col>
            <el-col span="6">
              <el-card class="card-item0">
                <el-header class="card-header">
                  <span class="title4">贵宾休息室</span>
                </el-header>
                <el-main class="card-main">
                  <el-img src="@assets/good3.png" class="goods" width="100px" height="100px"></el-img>
                  <el-text class="card-text1">尊享贵宾礼遇</el-text>
                  <el-text class="card-text2">便捷出行体验</el-text>
                </el-main>
                <el-footer class="card-footer">
                  <el-button class="card-button">购买</el-button>
                </el-footer>
              </el-card>
            </el-col>
            <el-col span="6">
              <el-card class="card-item0">
                <el-header class="card-header">
                  <span class="title4">美食预订</span>
                </el-header>
                <el-main class="card-main">
                  <el-img src="@assets/good4.png" class="goods"></el-img>
                  <el-text class="card-text1">随心定制</el-text>
                  <el-text class="card-text2">空中美食</el-text>
                </el-main>
                <el-footer class="card-footer">
                  <el-button class="card-button">购买</el-button>
                </el-footer>
              </el-card>
            </el-col>
            <el-col span="6">
              <el-card class="card-item0">
                <el-header class="card-header">
                  <span class="title4">航空保险</span>
                </el-header>
                <el-main class="card-main">
                  <el-img src="@assets/good5.png" class="goods"></el-img>
                  <el-text class="card-text1">航班延误有得赔</el-text>
                  <el-text class="card-text2">小小的付出只为旅途中更美好的风景</el-text>
                </el-main>
                <el-footer class="card-footer">
                  <el-button class="card-button">购买</el-button>
                </el-footer>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </div>
      <div>
        <el-button class="back-button" @click="table = 1">上一步</el-button>
        <el-button class="back-button" @click="table = 3">下一步</el-button>
      </div>
    </el-header>
    <el-header class="order-container" v-if="table === 3">
      <div class="header">
        <el-button class="title2" type="text"><el-icon><Ticket /></el-icon>1.选择航班</el-button>
        <el-button class="title2" type="text"><el-icon><Ticket /></el-icon>2.填写订单</el-button>
        <el-button class="title2" type="text"><el-icon><Ticket /></el-icon>3.增值服务</el-button>
        <el-button class="title1" type="text"><el-icon><Ticket /></el-icon>4.出票完成</el-button>
      </div>
      <div type="card" class="order-card1">
        <el-header class="header5">
          <span class="title3">预定成功</span>
        </el-header>
        <el-main class="main1">
          <el-text>机票预订成功，请合理安排出行时间，以免耽误您的旅程。</el-text>
        </el-main>
      </div>
      <div>
        <el-button class="back-button" @click="table = 0">继续订票</el-button>
        <el-button class="back-button" @click="goHome">返回首页</el-button>
      </div>
    </el-header>
    <div class="card0">
      <el-header class="header3"></el-header>
      <el-icon class="icon0"><WarningFilled /></el-icon>
      <el-text class="text1">所有航班起抵时间均为当地时间（24小时制），请注意安排行程。</el-text>
      <el-main class="main0"></el-main>
      <el-text class="text2">温馨提示：</el-text>
      <el-text class="text3">厦航官网暂不接受重要旅客（VIP)、孕妇、病残旅客等特殊旅客购票。如您有需要，请到厦航自营售票处咨询。</el-text>
      <el-header class="header4"></el-header>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "UserRegister",
  data(){
    return {
      step: '0',
      table:0,
      order: '',
      departureCity: '',
      arrivalCity: '',
      date: "",
      normalDate: "",
      date1: "",
      idCardTypes: [],
      flights: [],
      cities: [],
      selectTickets: [],
      form: {
        idCard: '',
        totalPrice: 0,
        status: '未支付',
        tickets: [],
      },
    }
  },
  created() {
    if(this.$route.query.step!=undefined)
    this.step = this.$route.query.step;
  },
   async mounted() {
    await this.fetchCities();
    this.fetchFlights();
    this.fetchIdCardTypes();
    this.date = this.$route.query.date;
    this.date1 = this.$route.query.date1;
  },
  methods: {
    addTicket(tickets) {
      tickets.push({id:'',price:0, seatNumber: '',idCard: '',phone: '',name: '',idCardType: ''});
    },
    clearTicket(index) {
      console.log(this.form.tickets[index]);
      if(this.form.tickets[index].id === ''){
        return;
      }
      else{
        const ticketDTO = {
          id: this.form.tickets[index].id,
          seatNumber: this.form.tickets[index].seatNumber,
          status: '0',
        }
        axios.post('/tickets', ticketDTO)
            .then(() => {
              this.form.tickets[index].id = '';
              this.form.tickets[index].seatNumber = '';
              this.form.tickets[index].price = 0;
              this.form.tickets[index].status = '待售';
            })
            .catch(error => {
              console.error('更新机票失败', error);
              ElMessage.error('更新机票失败');
            });
      }
    },
    getTicketsBySelect(index){
      this.table = 1;
      axios.get(`/flight/${index}`)
          .then(response => {
            this.selectTickets = response.data;
            for(let i=0;i<this.form.tickets.length;){
              this.clearTicket(i);
              this.form.tickets.splice(i,1);
            }
            this.addTicket(this.form.tickets);
          })
          .catch(error => {
            console.error('获取选择的航班失败', error);
            ElMessage.error('获取选择的航班失败');
          });
      console.log(this.selectTickets);
    },
    search(){
      this.order = 0;
      let startDate='';
      const date = new Date(this.date);
      console.log(date);
      startDate = date.toISOString();

      let departureCity = this.departureCity;
      let arrivalCity = this.arrivalCity;
      if(this.$route.query.departureCity!=undefined&&this.departureCity == this.cities.find(city => city.cityCode.toString() === this.$route.query.departureCity).cityName){
        departureCity=this.$route.query.departureCity;
      }
      if(this.$route.query.arrivalCity!=undefined&&this.arrivalCity == this.cities.find(city => city.cityCode.toString() === this.$route.query.arrivalCity).cityName){
        arrivalCity=this.$route.query.arrivalCity;
      }
      if(this.departureCity == ''||this.arrivalCity == ''||this.date == ''){
        ElMessage.error('请输入完整信息');
        return;
      }
      const FindFlightDTO={
        departureCityCode: departureCity,
        arrivalCityCode: arrivalCity,
        startDate: startDate,
      };
      axios.post('airline/flights', FindFlightDTO)
          .then(response => {
            this.flights = response.data;
          })
          .catch(error => {
            console.error('搜索航班失败', error);
            ElMessage.error('搜索航班失败');
            this.flights = [];
          });

    },
    fetchIdCardTypes() {
      axios.get('/idCardType')
          .then(response => {
            this.idCardTypes = response.data;
          })
          .catch(error => {
            console.error('获取身份证类型失败', error);
            this.$message.error('获取身份证类型失败，请稍后再试');
          });
    },
    changeCity(){
      let change = this.departureCity;
      this.departureCity = this.arrivalCity;
      this.arrivalCity = change;
    },
    changeDate(){
      const date = new Date(this.date);
      this.normalDate = date.toString().slice(4, 10);
    },
    removeCabin(index,cabins) {
      cabins.splice(index, 1);
    },
     fetchCities() {
       axios.get('/cities')
          .then(response => {
            this.cities = response.data;
            if(this.$route.query.departureCity!=undefined&&this.$route.query.arrivalCity!=undefined){
              console.log(this.cities);
              this.departureCity = this.cities.find(city => city.cityCode.toString() === this.$route.query.departureCity).cityName;
              console.log(this.cities.find(city => city.cityCode === this.$route.query.departureCity));
              this.arrivalCity = this.cities.find(city => city.cityCode.toString() === this.$route.query.arrivalCity).cityName;
              console.log(this.cities.find(city => city.cityCode === this.$route.query.arrivalCity));
              this.search();
            }
          })
          .catch(error => {
            console.error('获取城市列表失败', error);
            ElMessage.error('获取城市列表失败');
          });
    },
    fetchFlights(){
      if(this.$route.query.departureCity!=''&&this.$route.query.arrivalCity!=''&&this.$route.query.date!=''){
        if(this.$route.query.departureCity==undefined)return;
      }
    },
    goHome(){
      this.$router.push({name: 'MainView'});
    }
  }
}
</script>
<style scoped>
.background{
  background-color: #f5f4f4;
  width: 100vw;
  height: 100vh;
}
.header{
  position: relative;
  background-color: #28436a;
  top: 20px;
  left: -30px;
  width: 100vw;
  height: 60px;
}
.title{
  position: relative;
  height: 100%;
  width: 180px;
  top: 0;
  left: 0;
  font-size: 16px;
  color: #367edc;
  background-color: #28436a;
}
.title1{
  position: relative;
  height: 100%;
  width: 180px;
  top: 0;
  left: 0;
  font-size: 16px;
  color: #ffffff;
  background-color: #367edc;
}
.title2{
  position: relative;
  height: 100%;
  width: 180px;
  top: 0;
  left: 0;
  font-size: 16px;
  color: #ffffff;
  background-color: #28436a;
}
.order-card{
  position: relative;
  top: 50px;
  left: 300px;
  width: 1000px;
  height: 170px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px #999999;
}
.divider{
  position: relative;
  left: 15px;
  width: 970px;
}
.header1{
  position: relative;
  top: 10px;
  height: 30px;
  width: 100%;
}
.main{
  width: 1000px;
}
.button1 {
  position: absolute;
  left: 20px;
  width: 100px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #15b7e5;
}
.button2{
  position: absolute;
  left: 120px;
  width: 100px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #abaeaf;
}
.button4{
  position: absolute;
  left: 20px;
  width: 100px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #abaeaf;
}
.button5{
  position: absolute;
  left: 120px;
  width: 100px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #15b7e5;
}
.input1{
  position: relative;
  height: 40px;
  width: 150px;
  top: -10px;
  left: 0;
}
.input2{
  position: relative;
  height: 40px;
  width: 150px;
  top: -100px;
  left: 200px;
}
.icon{
  position: relative;
  top: -68px;
  left: -305px;
  color: #367edc;
  background-color: #c8eaf6;
}
/deep/.input3{
  position: relative;
  height: 33px;
}
/deep/.input4{
  position: relative;
  height: 33px;
}
.form-item1{
  position: relative;
  height: 40px;
  width: 150px;
  top: -161px;
  left: 370px;
}
.form-item2{
  position: relative;
  height: 40px;
  width: 150px;
  top: -219px;
  left: 530px;
}
.find-button1{
  position: relative;
  height: 40px;
  width: 150px;
  top: -240px;
  left: 800px;
  border-radius: 20px;
  font-size: 16px;
  background-color: #f36115;
  color: #ffffff;
}
.find-button2{
  position: relative;
  height: 40px;
  width: 150px;
  top: -298px;
  left: 800px;
  border-radius: 20px;
  font-size: 16px;
  background-color: #f36115;
  color: #ffffff;
}
.header2{
  position: relative;
  background-color: #3761e5;
  top: 0;
  left: 0;
  width: 1000px;
  height: 40px;
}
.main-card{
  position: relative;
  top: 65px;
  left: 0;
  width: 1000px;
  margin-top: 10px;
  background-color: #d7f7ff;
  box-shadow: 0px 0px 10px #999999;
}
.flightNumber{
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 16px;
}
.departureTime{
  position: absolute;
  top: 50px;
  left: 100px;
  font-size: 16px;
}
.arrivalTime{
  position: absolute;
  top: 50px;
  left: 370px;
  font-size: 16px;
}
.airline{
  position: absolute;
  top: 20px;
  left: 250px;
  font-size: 20px;
}
.card{
  position: relative;
  top: 70px;
  left: 300px;
  width: 1000px;
  height: 100px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px #999999;
}
.card0{
  position: relative;
  margin-top: 50px;
  margin-left: 40px;
  width: 220px;
  height: 270px;
  background-color: #ffe5ad;
  box-shadow: 0px 0px 10px #999999;
}

.header3{
  position: relative;
  background-color: #fa7934;
  height: 5px;
}
.header4{
  position: relative;
  background-color: #fa7934;
  height: 5px;
  top: -70px;
}
.icon0{
  position: relative;
  font-size: 30px;
  top: 10px;
  left: 80px;
  color: #fa7934;
}
.text{
  font-size: 16px;
  position: relative;
  top: 8px;
  left: -290px;
  color: #ffffff;
  margin-left: 10px;
}
.text1{
  font-size: 12px;
  top: 30px;
  left: -10px;
  width: 200px;
  position: relative;
  text-align: left;
}
.text2{
  font-size: 16px;
  top: 30px;
  left: 10px;
  position: relative;
}
.text3{
  font-size: 12px;
  top: 70px;
  left: 0;
  position: relative;
  text-align: left;
}
.order-card1{
  position: relative;
  top: 50px;
  left: 300px;
  width: 1000px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px #999999;
}
.main1{
  position: relative;
  width: 500px;
  height: 300px;
}
.header5{
  position: relative;
  background-color: #a0c9f8;
  top: 0;
  left: 0;
  width: 1000px;
  height: 40px;
}
.title3{
  position: relative;
  top: 7px;
  left: -320px;
  color: #28436a;
}
.back-button{
  position: relative;
  margin-top: 100px;
  width: 120px;
  height: 40px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #15b7e5;
}
.order-card2{
  position: relative;
  top: 50px;
  left: 300px;
  width: 1000px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px #999999;
}
.card-item0{
  position: relative;
  margin-top: 30px;
  width: 200px;
  height: 200px;
  columns: auto;
}
.card-header{
  position: relative;
  top: -20px;
  left: -20px;
  width: 200px;
  height: 40px;
  background-color: #f2f4ff;
}
.title4{
  position: relative;
  top: 10px;
  left: 15px;
  font-size: 15px;
  color: #28436a;
}
.goods{
  position:relative;
  width: 100px;
  height: 100px;
  top: 20px;
}
.card-text1{
  position: absolute;
  top: 60px;
  left: 85px;
  font-size: 14px;
}
.card-text2{
  position: absolute;
  top: 90px;
  left: 85px;
  font-size: 14px;
}
.card-footer{
  position: relative;
  top: 60px;
  left: -20px;
  width: 200px;
  height: 40px;
  background-color: #ffecdc;
}
.card-button{
  position: relative;
  top: 3px;
  left: 50px;
  border-radius: 20px;
  width: 80px;
  background-color: #ff8420;
  color: #ffffff;
}
</style>
